<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg flex">
			<view class="must" v-if="item.require">
				*
			</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<view class="wrap-editor-list m-t-30 flex">
			<block v-for="(img, index) in list" :key="index">
				<image
					class="img"
					:class="
						img.value
							? formats[img.type] === img.value
								? 'active'
								: ''
							: formats[img.type]
							? 'active'
							: ''
					"
					:src="$staticImagePath(img.icon)"
					@click="onEditorItem(img)"
				/>
			</block>
		</view>

		<editor
			v-show="isFinishEditor"
			id="editor"
			class="wrap-textarea f-30 m-t-30"
			:placeholder="item.place"
			placeholder-class="place"
			show-img-size
			show-img-toolbar
			show-img-resize
			@ready="onEditorReady"
			@blur="onEndEditor"
			@statuschange="onStatusChange"
		></editor>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},

		data() {
			return {
				list: [
					{
						type: "bold",
						icon: "editor/bold.png",
					},
					{
						type: "italic",
						icon: "editor/italic.png",
					},
					{
						type: "underline",
						icon: "editor/underline.png",
					},
					{
						type: "strike",
						icon: "editor/strike.png",
					},
					{
						type: "align",
						value: "left",
						icon: "editor/alignLeft.png",
					},
					{
						type: "align",
						value: "center",
						icon: "editor/alignCenter.png",
					},
					{
						type: "align",
						value: "right",
						icon: "editor/alignRight.png",
					},
					{
						type: "align",
						value: "justify",
						icon: "editor/alignJustify.png",
					},
					{
						type: "lineHeight",
						value: "2",
						icon: "editor/lineHeight.png",
					},
					{
						type: "letterSpacing",
						value: "2em",
						icon: "editor/letterSpacing.png",
					},
					{
						type: "marginTop",
						value: "20px",
						icon: "editor/marginTop.png",
					},
					{
						type: "marginBottom",
						value: "20px",
						icon: "editor/marginBottom.png",
					},
					{
						type: "removeFormat",
						icon: "editor/removeFormat.png",
					},
					{
						type: "fontFamily",
						value: "Pacifico",
						icon: "editor/fontFamily.png",
					},
					{
						type: "fontSize",
						value: "24px",
						icon: "editor/fontSize.png",
					},
					{
						type: "color",
						value: "#0000ff",
						icon: "editor/color.png",
					},
					{
						type: "backgroundColor",
						value: "#00ff00",
						icon: "editor/backgroundColor.png",
					},
					{
						type: "insertDate",
						icon: "editor/insertDate.png",
					},
					{
						type: "list",
						value: "check",
						icon: "editor/listCheck.png",
					},
					{
						type: "list",
						value: "ordered",
						icon: "editor/listOrdered.png",
					},
					{
						type: "list",
						value: "bullet",
						icon: "editor/listBullet.png",
					},
					{
						type: "undo",
						icon: "editor/undo.png",
					},
					{
						type: "redo",
						icon: "editor/redo.png",
					},
					{
						type: "indent",
						value: "1",
						icon: "editor/indentAdd.png",
					},
					{
						type: "indent",
						value: "-1",
						icon: "editor/indentSub.png",
					},
					{
						type: "insertDivider",
						icon: "editor/insertDivider.png",
					},
					{
						type: "insertImage",
						icon: "editor/insertImage.png",
					},
					{
						type: "header",
						value: "1",
						icon: "editor/header.png",
					},
					{
						type: "script",
						value: "sub",
						icon: "editor/scriptSub.png",
					},
					{
						type: "script",
						value: "super",
						icon: "editor/scriptSuper.png",
					},
					{
						type: "clear",
						icon: "editor/clear.png",
					},
					{
						type: "direction",
						value: "rtl",
						icon: "editor/direction.png",
					},
				],

				formats: {},
				
				isFinishEditor: false,
			};
		},
		methods: {
			/**
			 * 编辑器初始化完成
			 */
			onEditorReady() {
				uni.createSelectorQuery()
					.in(this)
					.select("#editor")
					.context((res) => {
						this.editorCtx = res.context;
						this.editorCtx.setContents({
							html: this.value
						})
						this.isFinishEditor = true;
					})
					.exec();
			},
			/**
			 *
			 */
			onStatusChange(e) {
				this.formats = e.detail;
			},
			/**
			 * 结束编辑
			 */
			onEndEditor(e) {
				this.$emit("input", e.detail.html);
			},
			/**
			 * 编辑器点击
			 */
			onEditorItem(item) {
				if (item.type === "removeFormat") {
					this.editorCtx.removeFormat();
				} else if (item.type === "undo") {
					this.editorCtx.undo();
				} else if (item.type === "redo") {
					this.editorCtx.redo();
				} else if (item.type === "insertDivider") {
					this.editorCtx.insertDivider({
						success: function () {
							console.log("insert divider success");
						},
					});
				} else if (item.type === "insertImage") {
					this.onChooseImage();
				} else if (item.type === "insertDate") {
					const date = new Date();
					const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
					this.editorCtx.insertText({
						text: formatDate,
					});
				} else if (item.type === "clear") {
					this.onClear();
				} else {
					this.editorCtx.format(item.type, item.value);
				}
			},

			/**
			 * 清空
			 */
			onClear() {
				uni.showModal({
					title: "清空编辑器",
					content: "确定清空编辑器全部内容？",
					success: (res) => {
						if (res.confirm) {
							this.editorCtx.clear({
								success: function (res) {
									console.log("clear success");
								},
							});
						}
					},
				});
			},

			/**
			 * 选择图片
			 */
			onChooseImage() {
				this.$filters.onChooseImage(1, (list) => {
					this.onUploadImage(list[0]);
				});
			},
			/**
			 * 上传图片
			 */
			onUploadImage(file) {
				this.$commonNetwork.onUploadFile(file, (res) => {
					this.editorCtx.insertImage({
						src: res.fullurl,
						alt: "图像",
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "../css/form.css";

	.wrap-editor-list {
		margin-left: -27rpx;
		width: calc(100% + 54rpx);
		flex-wrap: wrap;
		overflow: hidden;

		.img {
			margin-left: 27rpx;
			margin-top: 20rpx;
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid white;
		}

		.active {
			border-color: #84BD00;
		}
	}
</style>
